<template>
  <view :class="{ radius: isRadius, boxShadow: isBoxShadow }" :style="[customStyle, { padding }]" class="my-card">
    <slot />
  </view>
</template>
<script lang="ts" setup>
defineProps({
  // 是否显示圆角
  isRadius: {
    type: Boolean,
    default: true
  },
  // 自定义样式style
  customStyle: {
    type: Object,
    default: () => ({})
  },
  // padding
  padding: {
    type: String,
    default: '10rpx'
  },
  // padding
  isBoxShadow: {
    type: Boolean,
    default: true
  }
});
</script>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  background-color: #fff;
}

.boxShadow {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.radius {
  border-radius: 10px;
}
</style>
